<template>
    <main-layout>
        <!-- 顶部搜索部分 -->
        <van-search
            v-model="value"
            shape="round"
            background="#fff"
            placeholder="请输入关键词"
        />

        <!-- 商品分类部分 -->
        <div class="goodsContent">
            <!-- 左边菜单栏部分 -->
            <div class="left">
                <div v-for="type in typeList" :class="['item', type.active ? 'active' : '']" @click="typeChange(type)" :key="type.name">
                    {{type.name}}
                </div>
            </div>

            <!-- 右边商品部分 -->
            <div class="right">
                <div class="item" v-for="it in goodsList" :key="it.id">
                    <img :src="it.path" alt="">
                    <div class="name">{{it.title}}</div>
                    <div class="dis">{{it.price}}元</div>
                    <van-button block
                        style="margin: 12px 0;"
                        round
                        color="linear-gradient(to right, #ff6034, #ee0a24)" @click="toGoodsDetail(it)">
                        查看详情
                    </van-button>
                    <van-button block
                        style="margin: 12px 0;"
                        round
                        color="linear-gradient(to right, #ff6034, #ee0a24)" @click="toGoodsCart(it)">
                        添加到购物车
                    </van-button>
                </div>
                <div class="loading" v-if="loading">加载中...</div>
                <div class="loading" v-else-if="hasMore" @click="toMoreEvt">加载更多</div>
                <div class="loading" v-else>没有更多数据</div>
            </div>
        </div>
    </main-layout>
</template>

<script>
    import MockService from '../../axios/MockServiceApi'
    export default {
        data() {
            return {
                value:'',
                //商品类型列表
                typeList:[],
                //商品列表
                goodsList:[],
                page:1,
                // 表示有更多的数据
                hasMore: true,
                // 数据接口请求中
                loading: true
            }
        },

        async created() {
            //调用接口获取商品类型
            let typeResult = await MockService.getGoodsType()
            if(typeResult.code===200){
                this.typeList=typeResult.data
            }

            //获取商品信息
            this.getList()
        },

        methods: {
            // 类型切换
            typeChange(type) {
                this.typeList = this.typeList.map(it => {
                    it.active = it.name === type.name
                    return it
                })
            },

            toMoreEvt() {
                if (this.hasMore && !this.loading) {
                    // 先设置加载状态
                    this.loading = true
                    // 设置page为将要获取的页面数字
                    this.page += 1
                    // 调用获取产品的接口
                    this.getList()
                }
            },

            async getList() {
                //获取商品数据
                let goodsResult = await MockService.getGoodsListApi(this.page,5)
                if(goodsResult.code===200){
                    this.goodsList=[...this.goodsList,...goodsResult.data.goods]
                    if(this.goodsList.length>=goodsResult.data.count){
                        this.hasMore=false
                    }
                }
                setTimeout(() => {
                    this.loading = false
                })
            },

            //前往购物车
            toGoodsCart(item){
                //将购物项目信息存入vuex中
                let shoppingArr=this.$store.getters['common/getShoppingInfo']||[]
                //判断购物车列表是否存在此商品
                let isHave=shoppingArr.some(function(i){
                    return i.id===item.id
                })
                if(isHave){
                    let index=shoppingArr.findIndex(function(i){
                        return i.id===item.id
                    })
                    shoppingArr[index].num++
                    shoppingArr[index].cheched=false
                }else{
                    item.cheched=false
                    shoppingArr=[...shoppingArr,item]
                }
                this.$toast.success('加入购物车成功')
                this.$store.commit('common/setShoppingInfo',shoppingArr)
            },

            //前往商品详情
            toGoodsDetail(it){
                this.$router.push('/goodsDetail?id='+it.id)
            }
        },
    }
</script>

<style lang="less" scoped>
    // 顶部搜索部分
    .van-search{
        width: 100%;
        height: 66px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
    }

    //商品分类部分
    .goodsContent {
        display: flex;
        .left {
            flex: 0 0 100px;
            background-color: #f6f7fb;
            position: relative;
            top: 66px;
            left: 0;
            z-index: 1;
            overflow-x: hidden;
            padding-top: 20px;
            > .item {
                position: relative;
                line-height: 42px;
                font-size: .8rem;
                color: #6d798f;
                text-indent: 16px;
                cursor: pointer;
                user-select: none;
                &::after {
                    display: block;
                    position: absolute;
                    top: 50%;
                    right: -4px;
                    margin-top: -8px;
                    width: 0;
                    height: 0;
                    border: solid 8px transparent;
                    border-left-color: #e40114;
                }
                &.active {
                    background-color: #fff;
                    color: #e40114;
                    &::after {
                        content: '';
                    }
                }
            }
        }
        .right {
            flex: 1;
            padding: 12px 10px 0;
            background-color: #fff;
            overflow-x: hidden;
            position: relative;
            top: 66px;
            left: 0;
            z-index: 1;
            > .item {
                margin-bottom: 12px;
                border-bottom: solid 1px #eaeaea;
                padding-bottom: 20px;
                &:last-child {
                    border-bottom: none;
                }
                > img {
                    display: block;
                    width: 100%;
                }
                .name {
                    display: block;
                    font-size: .8rem;
                    font-weight: 600;
                    padding: 8px 0;
                    border-bottom: solid 1px #eaeaea;
                    margin-bottom: 8px;
                }
                .dis {
                    margin: 6px 5px;
                    height: 22px;
                    line-height: 22px;
                    font-size: 1.1rem;
                    color: #e40114;
                    &::before {
                        content: '￥';
                        margin-right: 1px;
                        font-size: .75rem;
                        color: #e40114;
                    }
                }
                .van-button {
                    height: 36px;
                }
            }
            //加载部分
            > .loading{
                padding: 5px 0;
                color: #c9c9c9;
                text-align: center;
                letter-spacing: 1px;
            }
        }
    }
</style>